$("header").load("header.html");
$("footer").load("footer.html");

$(document).ready(function() {
    let local = localStorage;
    let goodsData = JSON.parse(local.goods);
    $("#big-box").css("background-image", "url(imgs-goods/100" + local.id + "0.jpg)");
    $("#small-box").css("background-image", "url(imgs-goods/100" + local.id + "0.jpg)");
    $(".alone-goods-img").eq(0).attr("src", "imgs-goods/100" + local.id + "0.jpg");
    $(".alone-goods-img").eq(1).attr("src", "imgs-goods/100" + local.id + "1.jpg");
    $(".alone-goods-img").eq(2).attr("src", "imgs-goods/100" + local.id + "2.jpg");
    $(".pc-lining-image").eq(0).attr("src", "imgs-goods/100" + local.id + "3.jpg");
    $(".pc-lining-image").eq(1).attr("src", "imgs-goods/100" + local.id + "4.jpg");
    $(".pc-lining-image").eq(2).attr("src", "imgs-goods/100" + local.id + "0.jpg");
    $(".goods-name").html(goodsData[local.id - 1 + "text"]);

    // 点击切换浏览图片
    $(".goods-tag-image").click(function(){
        let goodsImg = $(this).attr("src");
        // console.log($(this).attr("src"));
        $("#big-box").css("background-image", "url("+goodsImg+")");
        $("#small-box").css("background-image", "url("+goodsImg+")");
        $(".alone-goods-img").eq(0).attr("src", ""+goodsImg+"");
        for(let s = 0; s <$(".goods-tag-image").length; s++){
            $(".goods-tag-image").eq(s).css("border", "1px solid #959595");
        }
        $(this).css("border", "1px solid #FF0000");
        // this.parentNode.style.border = "1px solid #ff0000"
    })
    $(".goods-money-add").html(goodsData[local.id - 1 +"money"])
    $(".goods-money-real").html(goodsData[local.id - 1 +"money"])
    $(".add-cart").click(function (){
        // 判断是否登录
        if(local.name){

            $(".add-resolve").animate({
                top:0,
                opacity:1
            },400,function() {
                $(this).animate({
                    top:0,
                    opacity:1
                },600,function() {
                    $(this).css({
                        top:40,
                        opacity:0
                    })
                })

                
            });
            
            $.ajax({
                type:"GET",
                url:"php/addClientGoods.php",
                data:"client_name="+local.name+"&goods_id=100"+local.id+"&goods_color="+$(".goods-color").html()+"&goods_sum="+$(".buy-num").val()+"&goods_size="+$("#goods-size").html()+"&&goods_text= "+$(".goods-name").html()+""
            })
            
            
            console.log("client_name="+local.name+"&goods_id=100"+local.id+"&goods_color="+$(".goods-color").html()+"&goods_sum="+$(".buy-num").val()+"&goods_size="+$("#goods-size").html()+"&&goods_text= "+$(".goods-name").html());
            
            
        }else{
            alert("请先登录");
            $(location).attr('href', 'log.html');
        }
    })

    goods();
})


function addResolve () {
    
}

function goods() {
    class Magnifier {
        constructor(smallBox, mask, bigBox) {
            this.smallBox = smallBox;
            this.mask = mask;
            this.bigBox = bigBox;
            this.evevtBind();

        }
        onmouseover() {
            let that = this;
            this.smallBox.onmouseover = function() {
                that.mask.style.display = "block";
                that.bigBox.style.display = "block";
            }
        }
        onmouseout() {
            let that = this;
            this.smallBox.onmouseout = function() {
                that.mask.style.display = "none";
                that.bigBox.style.display = "none";

            }
        }
        onmousemove() {
            let that = this;
            this.smallBox.onmousemove = function(evt) {
                let e = evt || event;
                // let addBox = document.querySelector(".pc-lining-goods-detail");


                // let addTop = getComputedStyle(addBox)["margin-top"];
                // let addLeft = getComputedStyle(addBox.parentElement)["margin-left"];

                // let addLeft = $(".goods-all-message").css("width")
                // console.log(e.pageX - that.mask.offsetHeight/2 - this.offsetLeft)


                let y = e.pageY - that.mask.offsetHeight / 2 - this.offsetTop - 125;
                let x = e.pageX - that.mask.offsetHeight / 2 - this.parentNode.parentNode.parentNode.offsetLeft;

                if (y < 0) {
                    y = 0;
                }
                if (x < 0) {
                    x = 0;
                }
                if (y > this.offsetHeight - that.mask.offsetHeight) {
                    y = this.offsetHeight - that.mask.offsetHeight;
                }
                if (x > this.offsetWidth - that.mask.offsetWidth) {
                    x = this.offsetWidth - that.mask.offsetWidth;
                }

                that.mask.style.top = y + "px";
                that.mask.style.left = x + "px";

                that.bigBox.style.backgroundPositionY = -y * 4 + "px";
                that.bigBox.style.backgroundPositionX = -x * 4 + "px";

            }
        }
        evevtBind() {
            this.onmouseover();
            this.onmouseout();
            this.onmousemove();
        }
    }
    class HmgeSwilcher {
        constructor(smallBox, mask, bigBox, oImg) {
            this.smallBox = smallBox;
            this.mask = mask;
            this.bigBox = bigBox;
            this.oImg = oImg;
            this.onmouseover();
        }
        onmouseover() {
            let that = this;
            for (let i = 0; i < oImg.length; i++) {
                oImg[i].onmouseover = function() {
                    for(let s = 0; s < oImg.length; s++){
                        oImg[s].parentNode.style.border = "1px solid #959595"
                    }
                    this.parentNode.style.border = "1px solid #ff0000"
                    let onImg = this.getAttribute("src");
                    // console.log(onImg)
                    that.smallBox.style.backgroundImage = "url(" + onImg + ")";
                    that.bigBox.style.backgroundImage = "url(" + onImg + ")";
                    let fw = new Magnifier(that.smallBox, that.mask, that.bigBox);
                }
            }
        }
    }
    let smallBox = document.querySelector("#small-box");
    let mask = document.querySelector("#mask");
    let bigBox = document.querySelector("#big-box");
    let oImg = document.querySelectorAll(".alone-goods-img");
    let fw = new Magnifier(smallBox, mask, bigBox);
    let HS = new HmgeSwilcher(smallBox, mask, bigBox, oImg);
}